<template>
    <div id="amis-render-box" ref="box"> </div>
  </template>
  <script>
    let amis = window.amisRequire('amis/embed')
  export default {
    name: 'AmisRender',
    props: {
        schema: {
            type: Object,
            default() {
                return {
                    
                }
            }
        },
        data: {
            type: Object,
            default() {
                return {}
            }
        },
    },
    data () {
      return {
        
      }
    },
    methods: {
        renderAmis () {
            // let amis = window.amisRequire('amis/embed')
            amis.embed(this.$refs.box, this.schema,{
                "data":{
                    ...this.data
                }
            },{
            tracker: (eventTrack, props) => {
                console.log('触发改变元素',eventTrack, props)
                // this.$emit('changeProperties',eventTrack)
                if(eventTrack.eventType === 'formItemChange'){
                    window.changeProperties(eventTrack)
                }
                if(eventTrack.eventType === 'api'){
                    // window.toast(props)
                }
            }
        })
        },
    },
    mounted(){
        this.renderAmis()
    },
    watch: {
        schema (value) {
            console.log(value, 'schema变化了')
            if(value){
                this.schema = value
                this.renderAmis()
            } else {
                this.schema = {}
            }
        
        },
        data(value){
            console.log(value,'数据变化了')
            if(value){
                this.data = value
                this.renderAmis()
            } else {
                this.data = {}
            }
            
        }
  }
  }
  </script>
  <style scoped>
 
  </style>
  